<template>
  <div class="container">
    <div class="title-container">
      水平衡分析
      <img
        class="title-img"
        style="height: 70px; width: 100%"
        src="../../../assets/imgs/head1.png"
      />
      <div class="bottom-line"></div>
    </div>
    <div class="data-container">
      <div class="block">
        <el-form
          :inline="true"
          size="mini"
          :model="searchForm"
          class="search-form"
        >
          <el-form-item label="日期:" class="label-color">
            <el-date-picker
              v-model="searchForm.startDate"
              size="mini"
              style="width: 128px"
              type="date"
              placeholder="开始日期"
            />
            <span
              style="
                margin-left: 10px;
                color: #fff;
                font-weight: bold;
                margin-right: 10px;
              "
              >--</span
            >
            <el-date-picker
              v-model="searchForm.endDate"
              size="mini"
              style="width: 128px"
              type="date"
              placeholder="结束日期"
            />
          </el-form-item>
          <!-- <el-form-item label="其他选择">
            <el-select
              v-model="searchForm.region"
              placeholder="活动区域"
              style="width: 100px"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table-container">
          <div class="table1">
            <el-table
              :data="tableData"
              style="width: 100%"
              :border="true"
              :show-header="false"
              :cell-style="{
                'text-align': 'center',
                'font-weight': 'bold',
                color: '#fff',
                height: '55px',
              }"
              @cell-mouse-enter="selectRow"
            >
              <el-table-column prop="name" label="表格项" width="180" />
              <el-table-column prop="data" label="数据" />
            </el-table>
            <div class="panel-footer" />
          </div>
          <div class="total-chart-panel">
            <div id="total-chart" class="total-chart" />
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="chart-container">
          <div id="chart1" class="item-chart" />
          <div class="chart-title">采出水量</div>
        </div>
        <div class="chart-container">
          <div id="chart2" class="item-chart" />
          <div class="chart-title">冷凝水量</div>
        </div>
        <div class="chart-container" style="margin-bottom: 0px">
          <div id="chart3" class="item-chart" />
          <div class="chart-title">清水用量</div>
        </div>
      </div>
      <div class="block2">
        <div class="chart-container">
          <div class="select-option">
            <span
              style="
                color: #fff;
                font-size: 14px;
                display: inline-block;
                line-height: 28px;
                height: 28px;
                margin-right: 10px;
              "
              >选择数据</span
            >
            <el-select
              v-model="value1"
              multiple
              collapse-tags
              placeholder="请选择"
              size="mini"
              :fit-input-width="true"
              @change="changeShowItemState"
            >
              <el-option
                v-for="item in optionChart4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div id="chart4" class="item-chart" />
          <div class="chart-title">回用锅炉水量</div>
        </div>
        <div class="chart-container">
          <div id="chart5" class="item-chart" />
          <div class="chart-title">回注回灌水量</div>
        </div>
        <div class="chart-container" style="margin-bottom: 0px">
          <div id="chart6" class="item-chart" />
          <div class="chart-title">210池进水量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import * as echarts from "echarts";
export default {
  data() {
    return {
      value1: ["锅炉净化软化水量", "燃气锅炉清水软化水量", "MVC产水供宇澄量"],
      optionChart4: [
        {
          value: "锅炉净化软化水量",
          label: "锅炉净化软化水量",
        },
        {
          value: "燃气锅炉清水软化水量",
          label: "燃气锅炉清水软化水量",
        },
        {
          value: "MVC产水供宇澄量",
          label: "MVC产水供宇澄量",
        },
        {
          value: "重32燃气锅炉清水软化水用量",
          label: "重32燃气锅炉清水软化水用量",
        },
        {
          value: "宇澄燃煤锅炉清水软化水用量",
          label: "宇澄燃煤锅炉清水软化水用量",
        },
        {
          value: "二联去一联清水软化水转冰",
          label: "二联去一联清水软化水转冰",
        },
        {
          value: "回用锅炉总量",
          label: "回用锅炉总量",
        },
      ],
      chartTotal: null,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      // #region
      optionTotal: {
        backgroundColor: "rgba(255,255,255,0)",
        color: ["#75f9fd", "#e5323e"],
        title: {
          text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "rgba(255,255,255,0)",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#6da7f0" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#33cccc",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "总进水量",
            type: "line",
            data: [54000, 53000, 52000, 54123, 56128, 55520, 54213, 54712],
          },
          {
            name: "总出水量",
            type: "line",
            data: [55555, 55520, 55536, 55510, 55510, 55520, 51203, 53621],
          },
        ],
      },
      option1: {
        backgroundColor: "rgba(128, 128, 128, 0)",
        color: ["#75f9fd", "#e5323e"],
        title: {
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "特一联",
            type: "line",
            data: [52500, 53000, 56000, 54123, 55128, 51110, 52456, 51456],
          },
          {
            name: "特二联",
            type: "line",
            data: [55555, 55520, 55536, 55510, 55510, 55520, 51203, 53621],
          },
        ],
      },
      option2: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          //   text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "供32流化床",
            type: "line",
            data: [43251, 51000, 50500, 54123, 56128, 55520, 54213, 54712],
          },
          {
            name: "回掺至管汇",
            type: "line",
            data: [55555, 55520, 55536, 55510, 55510, 55520, 51203, 53621],
          },
        ],
      },
      option3: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          //   text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "1#软化水站",
            type: "line",
            data: [54000, 53000, 36000, 54123, 56128, 55520, 54213, 55532],
          },
          {
            name: "2#软化水站",
            type: "line",
            data: [55555, 55520, 62500, 42000, 55510, 55520, 51203, 53621],
          },
        ],
      },
      option4: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          //   text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { type: "scroll", show: false, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "锅炉净化软化水量",
            type: "line",
            data: [34000, 23000, 52000, 54123, 46128, 55520, 54213, 54712],
          },
          {
            name: "燃气锅炉清水软化水量",
            type: "line",
            data: [15555, 45520, 45536, 55510, 25510, 45520, 41203, 53621],
          },
          {
            name: "MVC产水供宇澄量",
            type: "line",
            data: [25555, 55520, 45536, 55510, 15510, 75520, 31203, 53621],
          },
          {
            name: "重32燃气锅炉清水软化水用量",
            type: "line",
            data: [35555, 35520, 26536, 55510, 65510, 95520, 41203, 53621],
          },
          {
            name: "宇澄燃煤锅炉清水软化水用量",
            type: "line",
            data: [45555, 25520, 35536, 55510, 55510, 65520, 21203, 53621],
          },
          {
            name: "二联去一联清水软化水转冰",
            type: "line",
            data: [55555, 15520, 45536, 55510, 35510, 45520, 71203, 53621],
          },
          {
            name: "回用锅炉总量",
            type: "bar",
            data: [
              120034, 160034, 155536, 155510, 135510, 90520, 122203, 143621,
            ],
          },
        ],
      },
      option5: {
        // color: ["#75f9fd", "#e5323e"],
        title: {
          //   text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "乌32，36注水",
            type: "line",
            data: [54000, 53000, 52000, 54123, 66128, 25520, 54213, 54712],
          },
          {
            name: "乌123，风503回灌",
            type: "line",
            data: [45555, 65520, 25536, 75510, 55510, 45520, 51203, 53621],
          },
          {
            name: "回注回灌总量",
            type: "bar",
            data: [
              105555, 115520, 12536, 125510, 105510, 95520, 131203, 113621,
            ],
          },
        ],
      },
      option6: {
        //  color: ["#75f9fd", "#e5323e"],
        title: {
          //   text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "25%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "软化器高含盐水外排至调储池",
            type: "line",
            data: [44000, 53000, 62000, 74123, 56128, 65520, 54213, 74712],
          },
          {
            name: "净化水外排",
            type: "line",
            data: [35555, 25520, 25536, 65510, 55510, 25520, 51203, 33621],
          },
          {
            name: "mvc浓盐水",
            type: "line",
            data: [25555, 65520, 15536, 45510, 55510, 45520, 51203, 43621],
          },
          {
            name: "风南4采出水",
            type: "line",
            data: [77555, 45520, 25536, 35510, 55510, 65520, 51203, 53621],
          },
          {
            name: "外排水合计",
            type: "bar",
            data: [
              155555, 145520, 125536, 135510, 125510, 105520, 111203, 143621,
            ],
          },
        ],
      },
      searchForm: {
        startDate: "",
        endDate: "",
        user: "",
        region: "",
      },
      tableData: [
        {
          name: "今日用水",
          data: "2035m³",
        },
        {
          name: "今日总出水量",
          data: "2035m³",
        },
        {
          name: "今日富余量",
          data: "2035m³",
        },
        {
          name: "日期",
          data: "2024年7月16日",
        },
        {
          name: "平均用水",
          data: "2035m³",
        },
      ],
      // #endregion
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom1 = document.getElementById("total-chart");
      var totalChart = echarts.init(chartDom1);
      totalChart.setOption(this.optionTotal, true);
      var chartItemDom1 = document.getElementById("chart1");
      var itemChart1 = echarts.init(chartItemDom1);
      itemChart1.setOption(this.option1, true);
      var chartItemDom2 = document.getElementById("chart2");
      var itemChart2 = echarts.init(chartItemDom2);
      itemChart2.setOption(this.option2, true);
      var chartItemDom3 = document.getElementById("chart3");
      var itemChart3 = echarts.init(chartItemDom3);
      itemChart3.setOption(this.option3, true);

      var chartItemDom4 = document.getElementById("chart4");
      var itemChart4 = echarts.init(chartItemDom4);
      this.chart4 = itemChart4;
      itemChart4.setOption(this.option4, true);
      var chartItemDom5 = document.getElementById("chart5");
      var itemChart5 = echarts.init(chartItemDom5);
      itemChart5.setOption(this.option5, true);
      var chartItemDom6 = document.getElementById("chart6");
      var itemChart6 = echarts.init(chartItemDom6);
      itemChart6.setOption(this.option6, true);
      window.addEventListener("resize", function () {
        totalChart.resize();
        itemChart1.resize();
        itemChart2.resize();
        itemChart3.resize();
        itemChart4.resize();
        itemChart5.resize();
        itemChart6.resize();
      });
    },
    changeShowItemState(selectData) {
      console.log(selectData);
      let selected = {
        锅炉净化软化水量: false,
        燃气锅炉清水软化水量: false,
        MVC产水供宇澄量: false,
        重32燃气锅炉清水软化水用量: false,
        宇澄燃煤锅炉清水软化水用量: false,
        二联去一联清水软化水转冰: false,
        回用锅炉总量: false,
      };
      selectData.forEach((item) => {
        selected[item] = true;
      });
      this.option4.legend.selected = selected;

      this.chart4.setOption(this.option4, true);
    },
    // selectRow(row, column, cell, event) {
    //   console.log(row);
    //   console.log(column);
    //   console.log(cell);
    //   console.log(event);
    // },
  },
};
</script>
<style scoped lang="scss">
.container {
  // transform: scale(1);
  width: 100%;
  height: 100vh;
  background-color: #02104f;
}
.title-container {
  height: 80px;
  position: relative;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  color: white;
  .title-img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .bottom-line {
    position: absolute;
    height: 8px;
    width: 300px;
    border-radius: 5px;
    background-color: aqua;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.data-container {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 120px);
  .search-form {
    // height: 15%;
    width: 100%;
    padding: 15px 20px;
    ::v-deep .el-form-item__label {
      color: #6da7f0;
    }
    ::v-deep .el-input__inner {
      background-color: transparent !important;
      border: 1px solid #75f9fd;
    }
  }
  .block {
    width: 32%;
    height: 100%;
    margin-right: 20px;
    margin-left: 20px;
    border: 2px solid #33a2f8;
    .table-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      //   justify-content: space-between;
      .table1 {
        width: 95%;
        height: 300px;
        background-color: #0b1539;
        border: 2px solid #33a2f8;
        padding: 8px 8px;
        position: relative;
        margin-bottom: 10px;
        ::v-deep .el-table,
        ::v-deep .el-table tr,
        ::v-deep .el-table th {
          background-color: transparent;
        }
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: #212e3e !important;
        }
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-left: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          width: 30px;
          height: 30px;
          border-right: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        .panel-footer {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-left: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
          &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            border-right: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
        }
      }
      .total-chart-panel {
        width: 95%;
        height: calc(100% - 410px);
        background-color: #0b1539;
        border: 2px solid #33a2f8;
        padding: 8px 8px;
        position: relative;
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-left: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          width: 30px;
          height: 30px;
          border-right: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        .total-chart {
          width: 100%;
          height: 100%;
          position: absolute;
          padding-bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
        }
        .panel-footer {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-left: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
          &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            border-right: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
        }
      }
    }
  }
}
.block2 {
  width: 32%;
  height: 100%;
  margin-right: 20px;
  margin-left: 20px;
  border: 2px solid #33a2f8;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .chart-container {
    height: 31%;
    width: 100%;
    background-color: #0b1539;
    margin-bottom: 20px;
    position: relative;
    .select-option {
      ::v-deep .el-select__tags-text {
        display: inline-block;
        max-width: 80px; // 根据实际情况调整
        overflow: hidden; // 溢出隐藏
        text-overflow: ellipsis; // 超出文本以省略号显示
        white-space: nowrap; // 文本不换行
      }
      position: absolute;
      top: -15px;
      z-index: 999;
      ::v-deep .el-form-item__label {
        color: #6da7f0;
      }
      ::v-deep .el-input__inner {
        background-color: transparent !important;
        border: 1px solid #75f9fd;
      }
    }
    .item-chart {
      width: 100%;
      height: 90%;
    }
    .chart-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #6da7f0;
    }
  }
}
</style>
